<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../static/mui/css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    .mui-content{
    	margin-bottom: 20%;
    }
    .mui-table-view-cell:after {
    	background-color: #FFFFFF;
	}
	.mui-card span{
		font-size: 15px;
	}
    .orderTitle{
    	list-style: none; 
    	background-color: #FFFFFF; 
    	padding-top: 4%;
    	padding-bottom: 3%;
    	padding-left: 30px;
    }
    .orderTitle>li:nth-child(1){
    	float: left; 
    	padding-top: 2%;
    	margin-right: 3%;
    	font-size:x-large;
    }
    .orderTitle>li:nth-child(3){
    	font-size: small;
    }
    .pay-state{
    	height: 44px;
    }
   .service-detail{
    	border-top-right-radius: 0px;
	    border-top-left-radius: 0px;
	    border-top: 0px;
    }
    .service-detail div{
    	float: right;
    }
    .oper-button{
    	margin-top: 10px; 
    	text-align: center;
    } 
    .mui-table-view-cell>.mui-badge{
	    position: absolute;
	    top: 50%;
	    left:5%;
	    right:65%;
	    text-align: center;
	 }
	 .mui-table-view-cell.mui-active{
	    background-color: #FFFFFF;
	}
	.mui-table-view-cell {
		padding: 7px 15px;
	}
    </style>
</head>
<body> 
	<header class="mui-bar mui-bar-nav" style="background-color:#dd524d;">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
	    <h1 class="mui-title" style="color: #fff;">订单详情</h1>
	</header>
	<div class="mui-content mui-scroll-wrapper" style="height:100%;" >
		<div class="mui-scroll">
			<!--订单标题-->
			<ul class="orderTitle" >
				<li></li>
				<li>已接单,待服务</li>
				<li><span>下单时间: </span><span id="startDate">2015-12-29 19:10:19</span></li>
			</ul>
			<!--下单人员信息-->
		    <div class="mui-card" style="border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
		      	<ul class="mui-table-view">
			     	<li class="mui-table-view-cell pay-state" >
			     		<span class="mui-badge mui-badge-red" id="payType">在线支付</span>
			        </li>
			        <li class="mui-table-view-cell">
			        	<span id="linkName">袁姗姗</span>&nbsp;&nbsp;&nbsp;
			        	<span id="tel">15068954523</span>
			        </li>
			        <li class="mui-table-view-cell">
			            <span>地址：</span>
			            <span id="address">商鼎路聚源路文明小区2单元1265</span>
			        </li>
			        <li class="mui-table-view-cell">
			             <span>服务时间：</span>
			             <span id="serTime">2015-12-13 15:30</span>
			        </li>
		     	</ul>
		    </div> 
		   	<!--服务详情-->
		    <div class="mui-card service-detail" >
			    <ul class="mui-table-view">
			     	<li class="mui-table-view-cell">
			        	<span id="serType">日常保洁</span>
			        	<div >
			        	   <span id="title">2小时</span>
			        	   <span id="total">￥60.00</span>
			        	</div>
			        </li>
			        <li class="mui-table-view-cell">
			            <span>总计</span>
			            <div>
				            <span id="payState">(未支付)</span>
				            <span style="color:red;" id="amount" data-val="23">￥23.00</span>
			            </div>
			        </li>
			        <li class="mui-table-view-cell">
			            <span>备注：</span>
			            <span id="demo"></span>
			        </li>
			    </ul>
		    </div>
		    <!--标记已服务-->
		    <div class="oper-button" >
		   	  	<button type="button" class="mui-btn mui-btn-blue mui-col-sm-5 mui-col-xs-5" >标记已服务</button>
		    </div>
	 </div>
	</div>
	<script src="../../static/mui/js/mui.min.js" type="text/javascript"></script>
    <script src="../../static/lib/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="../../static/app/js/kit.js" type="text/javascript"></script>
    <script src="../../static/app/js/api.js" type="text/javascript"></script>
	<script type="text/javascript" >
	mui.plusReady(function(){
		var shopid = "";
		var orderNum = "";
		 //自定义事件监听
		 window.addEventListener('getWaitData',function(event){
		  //获得事件参数
		  shopid= event.detail.shopid;
		  orderNum= event.detail.orderNum;
		  //向服务器请求详情
		  getAjaxData(orderNum,shopid);
		});
		
		/**
		 * 获得页面数据
		 * @param {Object} orderNum 订单号
		 * @param {Object} shopid   商家id
		 */
		function getAjaxData(orderNum,shopid){
			API.orderDetail(shopid,orderNum,function(data){
				var order = data;
				var startDate = order.STARTDATE;
				var userName = order.LINKNAME;
				
				var tel = order.TEL;
				var address = order.ADDRESS;
				var serTime= order.SERTIME;
				var orderState = order.ORDERSTATE;
				var payType = order.PAYTYPE==1?"在线支付":"服务后付款";
				var payState = order.PAYSTATE==1?"待付款":"已付款"; 
				
				var type = order.TYPE == 1?"日常保洁":"深度保洁";
				var title = order.TITLE;
				var unitPrice = order.AMOUNT;
				var amount = order.AMOUNT;
				var demo = order.DESCRIBE==null?"":order.DESCRIBE ;
				
				$("#startDate").text(startDate);
				$("#linkName").text(userName);
				$("#tel").text(tel);
				$("#address").text(address);
				$("#serTime").text(serTime);
				$("#serType").text(type);
				$("#title").text(title);
				$("#total").text("￥"+amount);
				$("#payType").text(payType);
				$("#payState").text("("+payState+")");
				$("#amount").text("￥"+amount); 
				$("#demo").text(demo);
				$("#demo").attr("data-val",amount);
				
				if(orderState != 1){//预加载的页面防止页面按钮在第一次隐藏后就不在显示了
					$(".oper-button").hide();
				}else{
					$(".oper-button").show();
				}
			});
		}
		
		$(".oper-button")[0].addEventListener("tap",function(data){
			Kit.ui.showLoading();
			API.finish(shopid,orderNum, function(data){
				//防止时间过短订单管理刷新不到最新数据
				setTimeout(function(){
					$(".oper-button").hide(); 
					//触发详情页面的事件 
					var manage= plus.webview.getWebviewById('order/manage.html');
					mui.fire(manage,'getManageData',{shopid:shopid});
					//营业额增加
					var orderAmount = $("#demo").attr("data-val");
					var my= plus.webview.getWebviewById('my/index.html');
					mui.fire(my,"myOrderAmount",{orderAmount:orderAmount});
					
					//plus.webview.getWebviewById('order/manage.html').reload();
					Kit.ui.alert("标示成功");
					Kit.ui.closeLoading();
					mui.back();
				},1000);
			});
		});
	});
    </script>
</body>
</html>